<template>
    <div>
        <div class="options-wrapper">
            <div class="search">
                <Form ref="formInline" :model="formInline" inline>
                    <FormItem prop="user">
                        <Input type="text" v-model="formInline.studentName" readonly>
                            <span slot="prepend">学生</span>
                        </Input>
                    </FormItem>
                    <FormItem prop="course">
                        <Input type="text" v-model="formInline.course" readonly>
                            <span slot="prepend">科目</span>
                        </Input>
                    </FormItem>
                    <FormItem prop="teacher">
                        <Input type="text" v-model="formInline.teacher" readonly>
                            <span slot="prepend">科任老师</span>
                        </Input>
                    </FormItem>
                    <FormItem prop="counsel">
                        <Input type="text" v-model="formInline.counsel" readonly>
                            <span slot="prepend">咨询老师</span>
                        </Input>
                    </FormItem>
                    <FormItem prop="counsel">
                        <Input type="text" v-model="formInline.grade" readonly>
                            <span slot="prepend">年级</span>
                        </Input>
                    </FormItem>
                    <FormItem prop="counsel">
                        <Input type="text" v-model="formInline.feather" readonly>
                            <span slot="prepend">班级类型</span>
                        </Input>
                    </FormItem>
                </Form>
            </div>
            <div class="left-options">
                <Button class="title-option" type="success" @click="add">添加</Button>
            </div>
        </div>
        <Table border :columns="columns" :data="data">
            <template slot-scope="{row}" slot="action">
                <Button type="primary" size="small" style="margin-right: 15px" @click="edit(row)">编辑</Button>
                <Button type="error" size="small" style="margin-right: 15px" @click="remove(row)">删除</Button>
            </template>
        </Table>
        <month-form :modal="modal" :modify="modify"/>
    </div>
</template>

<script>
    import MonthForm from './MonthForm'

    export default {
        name: "Index",
        created() {
            this.getList();
        },
        components: {
            MonthForm
        },
        data() {
            return {
                modal: false,
                modify: '',
                formInline: this.$route.query,
                columns: [
                    {
                        title: '年份',
                        key: 'year'
                    }, {
                        title: '月份',
                        key: 'month'
                    }, {
                        title: '上课时长',
                        key: 'duration'
                    }, {
                        title: '备注',
                        key: 'remark'
                    }, {
                        title: '操作',
                        slot: 'action',
                        width: 200,
                        align: 'center'
                    }
                ],
                data:
                    [
                        {
                            year: '2020',
                            month: '03',
                            duration: '23'
                        }, {
                        year: '2020',
                        month: '02',
                        duration: '23'
                    }
                    ]
            }
        },
        methods: {
            getList() {
                this.$api.monthList(this.formInline.id).then(res => {
                    console.log("curricula", res)
                    this.data = res;
                })
            },
            add() {
                this.modify = {
                    id: '',
                    recordTime: '',
                    duration: '',
                    remark: '',
                    studentName: this.formInline.studentName,
                    curriculaId: this.formInline.id
                }
                this.modal = true;

            },
            //编辑
            edit(row) {
                this.modal = true;
                let modify = {
                    id: row.id,
                    recordTime: row.year + '-' + row.month,
                    duration: row.duration,
                    remark: row.remark,
                    studentName: this.formInline.studentName,
                    curriculaId: this.formInline.id
                }
                this.modify = modify
            },
            // search() {
            //     this.current;
            //     this.getList();
            // },
            // change(num) {
            //     this.current = num;
            //     this.getList();
            // },
            remove(row) {
                this.$Modal.confirm({
                    title: '确认删除:' + row.year + "-" + row.month + "的数据吗？",
                    onOk: () => {
                        this.$api.monthDelete({id: row.id})
                            .then(() => {
                                this.$Message.success('删除成功')
                                this.getList();
                            })
                    }
                })
            },
            // //月份统计
            // monthRecord(curricula) {
            //     console.log("curricula", curricula);
            // },
            //关闭编辑框
            cancel() {
                this.modal = false;
            },
            // course(row) {
            //     this.$router.push({path: 'course', query: row})
            // }
        }
    }
</script>

<style scoped>
    .options-wrapper {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
    }

    .left-options {
        display: flex;
        align-items: flex-start;
    }

    .search {
        display: flex;
    }

    .title-option {
        display: inline-block;
        margin-right: 10px;
    }

</style>
